<template>
  <div class="center-table-container">
    <el-table
      :data="tableData"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      :header-row-style="rowStyle"
      stripe
      style="width: 100%; height: 100%"
      ref="tableRef"
    >
      <el-table-column prop="siteName" label="站点名称" align="center" />
      <el-table-column label="电柜状态" align="center">
        <template #default="scope">
          <div :class="['status-cell', `status-${scope.row.cabinetStatus}`]">
            <span class="status-dot"></span>
            <span>{{ getStatusText(scope.row.cabinetStatus) }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="count" label="次数" align="center" />
      <el-table-column label="满电数" align="center">
        <template #default="scope">
          <span class="battery-ratio">
            {{ scope.row.fullBatteryCount ? scope.row.fullBatteryCount : 0 }} / 11
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick, watch } from "vue";

interface TableDataItem {
  siteName: string;
  cabinetStatus: string;
  count: number;
  fullBatteryCount: number;
  totalSlots: number;
}

const tableData = ref<TableDataItem[]>([]);

const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    success: "正常",
    warning: "维护中",
    info: "离线",
    danger: "故障",
  };
  return statusMap[status] || status;
};

const headerCellStyle = {
  color: "#fff",
  fontWeight: "600",
  fontSize: "14px",
  textAlign: "center",
  border: "none",
};

const cellStyle = {
  background: "transparent",
  color: "#8c9eff",
  fontSize: "13px",
  textAlign: "center",
  border: "none",
  borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
};

const rowStyle = {
  backgroundColor: "linear-gradient(90deg, #1e3a8a 0%, #3b82f6 100%);",
};

// ========= 滚动逻辑 =========
const tableRef = ref();
let timer: number | null = null;

const startAutoScroll = async () => {
  await nextTick();
  const wrapper: HTMLElement =
    tableRef.value.$el.querySelector(".el-scrollbar__wrap") ||
    tableRef.value.$el.querySelector(".el-table__body-wrapper");

  const firstRow = wrapper.querySelector(".el-table__row") as HTMLElement;
  if (!firstRow) return;
  const rowHeight = firstRow.offsetHeight;

  let step = 0;

  timer = window.setInterval(() => {
    if (!wrapper) return;
    step += 1;
    wrapper.scrollTop = step;

    // 一行走完
    if (step >= rowHeight) {
      step = 0;
      const first = tableData.value.shift();
      if (first) tableData.value.push(first);
      wrapper.scrollTop = 0;
    }
  }, 30); // 控制速度
};

const stopAutoScroll = () => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
};

// ========= 生命周期 =========
onMounted(() => {
  // 当数据变化时，决定是否滚动
  watch(
    tableData,
    (val) => {
      stopAutoScroll();
      if (val.length > 3) {
        startAutoScroll();
      }
    },
    { immediate: true, deep: true }
  );
});

onUnmounted(() => {
  stopAutoScroll();
});

// ========= 对外暴露 init =========
const init = (module: any) => {
  let data = JSON.parse(module);
  if (module) {
    tableData.value = data;
  }
};

defineExpose({
  init,
});
</script>

<style scoped lang="less">
.center-table-container {
  width: 100%;
  height: 100%;
  padding: 15px;
  box-sizing: border-box;

  :deep(.el-table) {
    background: transparent;
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 8px;
    overflow: hidden;

    .el-table__header-wrapper {
      background: linear-gradient(90deg, #1e3a8a 0%, #3b82f6 100%);

      .el-table__header {
        background: linear-gradient(90deg, #1e3a8a 0%, #3b82f6 100%);
      }
    }

    .el-table__body-wrapper {
      background: transparent;

      &::-webkit-scrollbar {
        width: 6px;
      }

      &::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
      }

      &::-webkit-scrollbar-thumb {
        background: #00d4ff;
        border-radius: 3px;
      }
    }

    .el-table__row {
      background: transparent;

      &:hover {
        background: rgba(0, 212, 255, 0.1) !important;
      }

      &.el-table__row--striped {
        background: rgba(0, 212, 255, 0.05);
      }
    }

    .el-table__cell {
      border: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding: 12px 0;
    }

    th.el-table__cell {
      background: transparent !important;
      color: #fff;
      font-weight: 600;
      font-size: 14px;
      border: none;
    }

    td.el-table__cell {
      color: #8c9eff;
      font-size: 13px;
    }
  }
}

.status-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
  }

  &.status-success {
    color: #00ff88;

    .status-dot {
      background: #00ff88;
      box-shadow: 0 0 8px #00ff88;
    }
  }

  &.status-warning {
    color: #ffd700;

    .status-dot {
      background: #ffd700;
      box-shadow: 0 0 8px #ffd700;
    }
  }

  &.status-info {
    color: #ff4757;

    .status-dot {
      background: #ff4757;
      box-shadow: 0 0 8px #ff4757;
    }
  }

  &.status-danger {
    color: #ffffff;

    .status-dot {
      background: #999999;
      box-shadow: 0 0 8px #ff4757;
    }
  }
}

.battery-ratio {
  color: #00d4ff;
  font-weight: 600;
}

:deep(.el-table td:nth-child(1)) {
  color: #fff !important;
}

:deep(.el-table td:nth-child(3)) {
  color: #ffd700 !important;
  font-weight: 600;
}

:deep(.el-table tr) {
  background-color: transparent !important;
}
</style>
